<!-- 该组件有个4.30~6.3的一个bug -->
<template>
    <div class="px-4 bg-white py-2">
        <Bar>
            <span class="bar-span">新建订单</span>
            <span class="text-[13px] ml-10 align-top text-red-500">带*的为必填项</span>
        </Bar>
        <el-form :model="form" label-width="100px" label-position="left" :rules="rules" class="px-6 pt-3">
            <!-- 客户信息 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="客户姓名" prop="customer_name">
                        <el-input v-model="form.customer_name" placeholder="请输入客户姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户电话" prop="phone">
                    <el-input v-model="form.phone" placeholder="11位手机号码" maxlength="11" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 备用信息 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="备用联系人" prop="spare_name">
                    <el-input v-model="form.spare_name" placeholder="请输入备用联系人姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="8" class="ml-2">
                    <el-form-item label="备用电话" prop="spare_phone">
                        <el-input v-model="form.spare_phone" placeholder="11位手机号码" maxlength="11" style="margin-left: -8px"/>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 客户属性 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="客户属性" prop="customer_attribute">
                        <el-select v-model="form.customer_attribute" placeholder="请选择">
                            <el-option label="个人" value="个人" />
                            <el-option label="企业" value="企业" />
                            <el-option label="特殊机构" value="特殊机构" />
                            <el-option label="战略合作" value="战略合作" />
                        </el-select>
                    </el-form-item> 
                </el-col>
                <!-- 服务类型 -->
                <el-col :span="8">
                    <el-form-item label="服务类型" prop="service_type"> <!-- 这里加 prop -->
                        <el-select v-model="form.service_type" placeholder="服务类型">
                            <el-option
                                v-for="item in serviceOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 客户类型 -->
            <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="客户类型" prop="customer_type">
                    <el-select v-model="form.customer_type" placeholder="请选择">
                        <el-option label="单次" value="单次" />
                        <el-option label="包月" value="包月" />
                        <el-option label="季度" value="季度" />
                        <el-option label="年度" value="年度" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="所属分店" prop="branch">
                <el-select v-model="form.branch" placeholder="请选择">
                    <el-option
                        v-for="item in shopLists"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                </el-form-item>
            </el-col>
            </el-row>

            <!-- 服务价格 -->
            <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="服务总价" prop="price">
                <el-input v-model.number="form.price" placeholder="元">
                    <template #append>元</template>
                </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="风控金" prop="risk_money">
                <el-input v-model.number="form.risk_money" placeholder="元">
                    <template #append>元</template>
                </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="是否已收款" prop="pay_status">
                    <el-radio-group v-model="form.pay_status">
                        <el-radio value="1" size="large">已收款</el-radio>
                        <el-radio value="0" size="large">未收款</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
            </el-row>

            <!-- 服务时间 -->
            <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="期望时间" prop="expectTime">
                <el-date-picker
                    v-model="form.expectTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="YYYY-MM-DD"
                />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="时间档期" prop="timeRange">
                    <el-select v-model="form.timeRange" placeholder="选择档期" style="width: 240px">
                        <el-option label="上午 8:00~10:00" value="上午8:00~10:00"/>
                        <el-option label="上午 10:30~12:30" value="上午10:30~12:30"/>
                        <el-option label="下午 2:00~4:00" value="下午2:00~4:00"/>
                        <el-option label="下午 4:30~6:30" value="下午4:30~6:30"/>
                    </el-select>
                </el-form-item>
            </el-col>
            </el-row>

            <!-- 服务地址 -->
            <el-form-item label="服务地址" prop="address">
                <el-input v-model="form.address" placeholder="详细地址" style="width: 50%" />
                <el-button type="primary" class="ml-10" :icon="Location" @click="openMap">定位位置</el-button>
            </el-form-item>

            <!-- 房间属性 -->
            <el-divider content-position="left">房间属性</el-divider>
            <div class="room-props">
                <span class="mr-4 text-[#606266] text-sm">房间面积</span><el-input v-model="form.area" placeholder="平米" style="width: 80px"/><span class="room-span">㎡</span>
                <el-input v-model="form.rooms" placeholder="室" style="width: 80px" /><span class="room-span">室</span>
                <el-input v-model="form.livingRooms" placeholder="厅" style="width: 80px" /><span class="room-span">厅</span>
                <el-input v-model="form.bathRooms" placeholder="卫" style="width: 80px" /><span class="room-span">卫</span>
                <el-input v-model="form.other" placeholder="其他特殊场所" style="width: 200px" />
            </div>
            <!-- 客户标签 -->
            <el-divider content-position="left">客户标签</el-divider>
            <div class="tags">
                <el-tag 
                    v-for="(tag, index) in form.tags"
                    :key="index"
                    closable
                    @close="removeTag(index)"
                >
                    {{ tag }}
                </el-tag>
                <div class="tag-input-wrapper">
                <el-input
                    v-model="newTag"
                    placeholder="添加标签"
                    style="width: 120px"
                    @keyup.enter="handleAddTag"
                />
                <el-button 
                    type="primary" 
                    plain
                    class="ml-3" 
                    @click="handleAddTag"
                >
                    + 添加
                </el-button>
                </div>
            </div>

            <!-- 备注 -->
            <el-form-item label="备注">
                <el-input
                    v-model="form.remark"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入备注信息"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="large" @click="submit">确认新建</el-button>
            </el-form-item>
        </el-form>

        <!-- 地图组件 -->
        <el-dialog
            v-model="mapDialogVisible"
            title="选择服务地址"
            width="850px"
            :close-on-click-modal="false"
            class="map-dialog"
            draggable
        >
            <TMap 
                mode="createOrder" 
                @update:address="updateAddress"
                @close="closeMap" 
            />
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="create">
import Bar from '@/components/Bar.vue'
import { Location } from '@element-plus/icons-vue'
import TMap from '@/components/TMap.vue'
import useTag from '@/hooks/useTag'
import { useOrderForm } from '@/hooks/useOrderForm'
import { useMapDialog } from '@/hooks/useMapDialog'
import { useStaffStore } from '@/stores/useStaffStore'
import instance from '@/api'
interface ServiceType {
  label: string;
  value: string;
}
// 获取表单相关的状态和方法
const { form, rules, submit } = useOrderForm()

// 获取地图对话框相关的状态和方法
const { mapDialogVisible, openMap, updateAddress, closeMap } = useMapDialog(form)

// 获取标签相关的状态和方法
const { newTag, handleAddTag, removeTag } = useTag(form)

// 获取分店列表
const staffStore = useStaffStore()
const shopLists = computed(() => {
    return staffStore.shopList.map((shop: { id:number; shop_name: string }) => ({
        value: shop.id,
        label: shop.shop_name
    }))
})
const serviceOptions = ref<ServiceType[]>([])
onMounted(async () => {
    const resp = await instance.get('/api/serviceType/lists')
    const { status, data } = resp
    if(status === 200) {
        serviceOptions.value = data.map((item: { id: number; service_type: string }) => ({
            value: item.service_type,
            label: item.service_type
        }))
    }
})

</script>

<style scoped>
.room-props {
  margin-bottom: 20px;
}
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}
.tag-input-wrapper {
  display: flex;
  align-items: center;
}
.tags .el-tag {
  margin-right: 10px;
}
.el-tag:hover {
  transform: scale(1.05);
  cursor: pointer;
}
.room-span{
    color: #606266;
    font-size: 14px;
    margin: 0 16px;
}

:deep(.map-dialog .el-dialog) {
    margin-top: 5vh !important;
}

:deep(.map-dialog .el-dialog__body) {
    height: 520px;
    padding: 0;
    overflow: hidden;
}

:deep(.map-dialog .el-dialog__header) {
    padding: 0 10px;
    margin: 0;
}
</style>